import { Component, OnInit } from '@angular/core';
import {Path} from "../../../../portal/admin/admin-breadcrumb/breadcrumb";
import {PageSubject} from "../../../../util/page-subject";
import {MonitorChartsService} from "./monitor-charts.service";
import {OneDialogService} from "../../../../widgets/one-dialog/one-dialog.service";
import {ResponseUtil} from "../../../../util/response-util";
import {MsgResult} from "../../../../models/msg-result";
import {MsgConstants} from "../../../../constants/constants";

declare var $;
declare var echarts;
declare var moment;

@Component({
  selector: 'app-monitor-charts',
  templateUrl: './monitor-charts.component.html',
  styleUrls: ['./monitor-charts.component.css']
})
export class MonitorChartsComponent implements OnInit {
  dataObj;config;checkCodeType;
  constructor(
    private pageSubject : PageSubject,
    private MonitorChartsService : MonitorChartsService,
    private responseUtil :ResponseUtil,
    private dialogService: OneDialogService,
  ) { }

  ngOnInit() {
    this.pushPage();
    this.initStyle();
    this.checkCodeType = "siteCodeType";
    this.initTimePicker();
    this.dataObj = {"queryCheckCode": $("#search-codes").val(), "startTime": $.trim($("#airQualityDate").val().split("至")[0]), "endTime": $.trim($("#airQualityDate").val().split("至")[1]), "tableName": $("#search-table").val(), "checkCodeType":this.checkCodeType, "qualityFactor": "AQI"};
    this.chartContentData(this.dataObj);
    this.initEvent();
  }

  //面包屑导航
  pushPage() {
    let path = new Path("原始数据查询", "");
    this.pageSubject.pushPage("数据图表", "", path);
  }

  initStyle(){
    //echarts高度控制
    $("#airQualityDataCharts").css({"width":"100%","height":$(window.innerHeight)[0]-330+"px"});

    // 按钮点击
    $(".btn-group .btn").click(function () {
      $(this).addClass("active").siblings(".active").removeClass("active");
    });

    // 切换查询的T_DATA_REGION_AIR_数据表
    $("#regionCodeType").click(function () {
      var html = "";
      html += "<option value='T_DATA_REGION_AIR_DAY-2017'>T_DATA_REGION_AIR_DAY-2017</option>";
      html += "<option value='T_DATA_REGION_AIR_HOUR'>T_DATA_REGION_AIR_HOUR</option>";
      html += "<option value='T_DATA_REGION_AIR_HOUR-2017'>T_DATA_REGION_AIR_HOUR-2017</option>";
      html += "<option value='T_DATA_REGION_AIR_MONTH-2017'>T_DATA_REGION_AIR_MONTH-2017</option>";
      html += "<option value='T_DATA_REGION_AIR_WEEK-2017'>T_DATA_REGION_AIR_WEEK-2017</option>";
      html += "<option value='T_DATA_REGION_AIR_YEAR-2017'>T_DATA_REGION_AIR_YEAR-2017</option>";
      $("#search-table").html(html);
    });
    // 切换查询的T_DATA_AIR_数据表
    $("#siteCodeType").click(function () {
      var html = "";
      html += "<option value='T_DATA_AIR_DAY-2017'>T_DATA_AIR_DAY-2017</option>";
      html += "<option value='T_DATA_AIR_HOUR'>T_DATA_AIR_HOUR</option>";
      html += "<option value='T_DATA_AIR_HOUR-2017'>T_DATA_AIR_HOUR-2017</option>";
      html += "<option value='T_DATA_AIR_MIN'>T_DATA_AIR_MIN</option>";
      html += "<option value='T_DATA_AIR_MIN-2017'>T_DATA_AIR_MIN-2017</option>";
      html += "<option value='T_DATA_AIR_MONTH-2017'>T_DATA_AIR_MONTH-2017</option>";
      html += "<option value='T_DATA_AIR_WEEK-2017'>T_DATA_AIR_WEEK-2017</option>";
      html += "<option value='T_DATA_AIR_YEAR-2017'>T_DATA_AIR_YEAR-2017</option>";
      $("#search-table").html(html);
    });

  };
  //图表数据
  chartContentData(obj){
    let dataId = $(".timeBtn").find(".active").attr("id");
    this.MonitorChartsService.getHideAirQualitySiteChartsData(obj).subscribe(
      result => this.responseUtil.success(result,this.tableContentDataResult),
      message => this.responseUtil.error(message)
    );
  }
  private tableContentDataResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.tableContentDataTree(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  private tableContentDataTree(data){
    if(data == null){
      $(".one-data-loadState").hide();
      let data = [];
      this.chartRender(data);
      $(".fixed-table-body .table").removeClass("fixed");
      $(".no-records-found>td").html("暂无数据");
    }else{
      console.log("表格数据加载成功");
      console.log(data);
      this.chartRender(data);
      $(".fixed-table-body .table").addClass("fixed");
      $(".one-data-loadState").hide();
    }
  }

  //初始化时间控件
  initTimePicker(){
    this.config = {
      timePicker: true,
      timePickerIncrement: 5,
      timePicker24Hour: true,
      locale: {
        format: "YYYY-MM-DD HH:mm:ss",
        separator: " 至 ",
        applyLabel: '确定',
        cancelLabel: '取消',
        fromLabel: '从',
        toLabel: '到',
        weekLabel: 'W',
        customRangeLabel: 'Custom Range',
        daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
        monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        firstDay: 1
      },
      startDate: moment().subtract(1,"d").format("YYYY-MM-DD HH:mm:ss"),
      endDate: moment().format("YYYY-MM-DD HH:mm:ss"),
      maxDate: moment().format("YYYY-MM-DD HH:mm:ss")

    };

//初始化日期插件
    $("#airQualityDate").daterangepicker(this.config);

  }
//图表
  chartRender(chartList) {
    var compareChart = echarts.init(document.getElementById('airQualityDataCharts'));
    //图表配置信息
    var option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data:chartList.siteNameList
      },
      xAxis: {
        type: 'category',
        nameGap:"20",
        name: "日期",
        nameLocation:"start",
        boundaryGap: false,
        data: chartList.timeList[0]
      },
      yAxis: {
        name: "指数",
        type: 'value'
      },
      series: []
    };
    //series中的内容
    $.each(chartList.siteNameList,function(index,nameList){
      option.series.push({"type":"line","smooth":true,"name":nameList,"data":chartList.dataList[index]})
    });
    console.log(option);
    compareChart.setOption(option);
  }

  dateChange() {
    let queryCheckCode = $("#search-codes").val();
    let tableName = $("#search-table").val();
    let startTime = $.trim($("#airQualityDate").val().split("至")[0]);
    let endTime = $.trim($("#airQualityDate").val().split("至")[1]);
    let qualityFactor = $(".factor").find(".active").attr("id");
    let checkCodeType = $(".timeBtn").find(".active").attr("id");
    this.dataObj = {"queryCheckCode": queryCheckCode, "startTime": startTime, "endTime": endTime, "tableName": tableName, "checkCodeType":checkCodeType, "qualityFactor": qualityFactor};
    this.chartContentData(this.dataObj);
  }

  initEvent(){
    $(".search").click(function () {
      this.dateChange();
    }.bind(this));
  }




}
